<template>
    <div class="class-box flex">
        <!-- <nut-tabs v-model="tab" direction="vertical" title-scroll style="" name="tabName" @change="tabChange">
            <nut-tab-pane v-for="item in list" :key="item" :title="`${item.label}`" :pane-key="item">
                <div class="list">
                    <div class="item" v-for="item in serviceList"
                        @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">
                        <img :src="item.remark" alt="">
                        <span>{{ item.project_Name }}</span>
                    </div>
                </div>
            </nut-tab-pane>
        </nut-tabs> -->
        <div class="c-left">
            <div class="c-list">
                <div :class="tab == index ? 'c-item active' : 'c-item'" v-for="(item, index) in list"
                    @click="tabChange(item, index)">
                    <div class="c-box center">
                        <div><img :src="item.extend" alt=""></div>
                        <div>{{ item.label }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-right">
            <div class="list">
                <div class="item" v-for="item in serviceList"
                    @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">
                    <img :src="item.remark" alt="">
                    <span>{{ item.project_Name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, toRefs, onMounted } from 'vue'
import Taro, { useRouter } from '@tarojs/taro'
import { getIndexClass, getIndexService } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const state = reactive({
            list: [] as any,
            tab: 0 as any,
            serviceList: [],
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        onMounted(() => {
            getData()
            getClass()
            const router = useRouter();
            if (router.params.id) {
                if (Number(router.params.id) == 5) {
                    state.tab = 0
                    setTimeout(() => {
                        getList({ pageType: state.list[0].value })
                    }, 500);
                } else {
                    state.tab = Number(router.params.id) + 1
                    let i = Number(router.params.id) + 1
                    setTimeout(() => {
                        getList({ pageType: state.list[i].value })
                    }, 500);
                }

            } else {
                getList('')
            }
        });
        const getData = () => {

        }
        const getList = (data) => {
            getIndexService(data).then(res => {
                if (res.code == 0) {
                    state.serviceList = res.data.list
                }
            })
        }
        const getClass = () => {
            getIndexClass({ ID: 12 }).then(res => {
                if (res.code == 0) {
                    state.list = [{ label: '全部', value: '', extend: 'https://cxj.szzkba.cn/upload/i/2024/10/17/145334.png' }, ...res.data.resysDictionary.sysDictionaryDetails]
                }
            })
        }
        const tabChange = (item, index) => {
            // getList({ pageType: state.list[e.paneKey].value })
            getList({ pageType: item.value })
            state.tab = index
        }
        return {
            ...toRefs(state), jumpTo, getClass, getList, tabChange
        };
    }
};
</script>
<style lang="scss">
.class-box {
    // .nut-tabs.vertical {
    //     height: 100vh;
    // }

    // .nut-grid-item__text {
    //     height: 100rpx;
    //     font-size: 21rpx;
    // }

    // .list {
    //     .item {
    //         display: inline-block;
    //         box-sizing: border-box;
    //         width: 33.33%;
    //         text-align: center;
    //         vertical-align: top;

    //         img {
    //             width: 110rpx;
    //             height: 110rpx;
    //         }

    //         span {
    //             height: 120rpx;
    //             font-size: 22rpx;
    //         }
    //     }
    // }
    .c-left {
        width: 200rpx;
        background: #F5F5F5;

        .c-list {
            height: 100vh;
            overflow-y: auto;

            .c-item {
                text-align: center;
                height: 180rpx;
                font-size: 24rpx;
                color: #7F7F7F;
                position: relative;
                white-space: nowrap;
                box-sizing: border-box;
                border-left: 4rpx solid transparent;
                font-weight: bold;

                .c-box {}

                img {
                    width: 60rpx;
                    height: 60rpx;
                }
            }

            .c-item.active {
                color: #F3BB68;
                border-left-color: #F3BB68;
                background: #FFFFFF;
            }
        }
    }

    .c-right {
        width: calc(100% - 200rpx);

        .list {
            .item {
                display: inline-block;
                box-sizing: border-box;
                width: 33.33%;
                text-align: center;
                vertical-align: top;

                img {
                    width: 100rpx;
                    height: 100rpx;
                }

                span {
                    height: 70rpx;
                    font-size: 22rpx;
                    color: #1D203F;
                    margin-top: 10rpx;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>